<!DOCTYPE html>
<html>
<head>
    <title>W2UI Demo: layout/1</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>

<div id="layout" style="width: 100%; height: 1200px;"></div>

<script type="module">

    import * as THREE from './build/three.module.js'
    import {AssetManager} from './js/AssetManager.js'
    //import {Editor} from './js/Editor.js'
    import {Viewport} from './js/Viewport/Viewport.js'
    import {OrbitControls} from "./js/jsm/controls/OrbitControls.js";
    import {TransformControls} from "./js/jsm/controls/TransformControls.js";

    $(function () {
        var pstyle = 'border: 1px solid #efefef; padding: 5px;';
        $('#layout').w2layout({
            name: 'layout',
            panels: [
                { type: 'top', size: 50, style: pstyle, html: 'top' },
                { type: 'left', size: 200, style: pstyle, html: 'left' },
                { type: 'main', style: pstyle, html: 'main' },
                { type: 'right', size: 200, style: pstyle, html: 'right' },
                { type: 'bottom', style : pstyle, html: 'bottom'}
            ]
        });

        init();
    });

    function init()
    {
    	var assetManager = new AssetManager();
    	// var editor = new Editor();

    	// window.editor = editor;
    	// window.THREE = THREE;

    	//var viewport = new Viewport(editor);

    	w2ui['layout'].get('bottom').w2layout(assetManager.config.layout);
    	w2ui.assetManager.html('left', $().w2sidebar(assetManager.config.fileSidebar));
    	w2ui.assetManager.html('main', $().w2grid(assetManager.config.fileGrid));

    	const scene = new THREE.Scene();
    	const aspect = window.innerWidth / window.innerHeight;
    	const camera = new THREE.PerspectiveCamera( 50, aspect, 0.01, 30000 );
    	scene.add( new THREE.GridHelper( 1000, 10, 0x888888, 0x444444 ) );

    	const renderer = new THREE.WebGLRenderer();

    	var container = w2ui['layout'].get('main');
    	renderer.setPixelRatio(window.devicePixelRatio);
    	renderer.setSize(container.width, container.height);
    	w2ui['layout'].html('main',renderer.domElement);

    	const geometry = new THREE.BoxGeometry(200, 200, 200);
    	const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    	const cube = new THREE.Mesh( geometry, material );
    	scene.add( cube );

    	camera.position.set( 1000, 500, 1000 );
    	camera.lookAt( 0, 200, 0 );

    	let orbit = new OrbitControls( camera, renderer.domElement );
    	orbit.update();
    	orbit.addEventListener( 'change', render );

    	let control = new TransformControls( camera, renderer.domElement );
    	control.addEventListener( 'change', render );

    	control.addEventListener( 'dragging-changed', function ( event ) {

    		orbit.enabled = ! event.value;

    	} );

    	control.attach(cube);
    	scene.add(control);

    	const animate = function () {
    		requestAnimationFrame( animate );

    		cube.rotation.x += 0.01;
    		cube.rotation.y += 0.01;

    		renderer.render( scene, camera );
    	};

    	function render() {

    		renderer.render( scene, camera );

    	}

    	animate();
    };
</script>

</body>
</html>